@charset "UTF-8";
a {text-decoration: none}
.index-page {padding: 100px 0 0;width: 600px;margin: 0 auto;
  .intro {line-height: 28px;font-size: 16px;margin-bottom: 30px}
  .btn {
    .title {font-size: 16px;margin-bottom: 20px;
      h4 {font-size: 15px;padding-top: 5px}
    }
    .row {margin-bottom: 30px;display: flex;
      a {display: block;margin-left: 15px;
        &:first-child {margin-left: 0}
      }
    }
  }
  .docs {margin-bottom: 20px}
}
.form-list-page, .add-form-demo {padding: 20px;
  h3 {margin-bottom: 20px;}
}
//////
.layout-docs {background: #f7f8fa;display: flex;
  .nav{position: fixed;right: 20px;top:0;border-bottom: 0;background: #f7f8fa;
  .el-menu-item{padding: 0 10px}}
  .sidebar {width: 0;background: #fff;height: 100vh;overflow-y: auto;overflow-x: hidden;box-shadow: 0 8px 12px #ebedf0;transition: all .3s;padding-top: 20px;
    /*span {padding: 18px 0 5px 0;color: #455a64;font-weight: 700;font-size: 15px;line-height: 28px;display: block}*/
    a {display: block;margin: 0;padding: 4px 0 4px 0;color: #455a64;font-size: 14px;transition: color 0.2s;text-decoration: none;
      &:hover {color: #4fc08d}
    }
    &.show{width: 180px;padding-left: 20px;}
  }
  .main-content {flex: 2;padding: 10px 30px 30px;overflow-x: hidden;overflow-y: auto;height: 100vh;
    .markdownIt-Anchor { display: none
    }
    .row {margin-bottom: 15px}
    h1 {padding: 30px 0 20px 0;margin: 0;font-size: 24px}
    h2 {padding: 30px 0 10px 0;margin: 0;font-size: 22px}
    h3 {padding: 20px 0 10px 0;margin: 0;font-size: 20px}
    h4 {padding: 10px 0 5px 0;margin: 0;font-size: 18px}
    .vuedoc-demo {margin-bottom: 20px;}
    p {padding: 6px 0;line-height: 22px;color: #455a64;
    strong{color: #333}}
    p code, table code { color: #444;
      background-color: #eeffde;
      margin: 0 4px;
      display: inline-block;
      padding: 3px 7px;
      border-radius: 3px;
      font-size: 14px;
      line-height: 20px;}
    .vuedoc__code {line-height: 22px;}
    .vuedoc-demo__footer {
      &:hover {color: #07c160}
    }
    .language-json, .language-javascript, .language-js {margin-bottom: 30px}
    img {max-width: 100%;display: block}
  }
  .vuedoc {
    > table {width: 100%;border-spacing: 0;border-collapse: collapse;border: 1px solid #eaeefb;margin-bottom: 20px;background: #fff;
      th, td {border: 1px solid #eaeefb;color: #314659;text-align: left;padding: 10px 15px;}
    }
  }
  /*.anchor-nav {position: fixed;right: 10px;top: 20px;background: #fff;padding: 10px 20px;border: 1px solid #eaeefb; border-radius: 3px;transform: translateX(100%);transition:all .3s;
    a {display: block;color: #314659;margin: 5px 0}
    .button{position: absolute;top:5px;cursor: pointer;transform: scale(.8)  rotate(180deg);transition: all .3s;left: -10px}
    &.visible{transform: translateX(0);
    .button{right: 5px;transform: scale(.8);left:auto}}
  }*/
  /*.left-fade-enter-active {
    //transition: all 1.2s ease;
  }
  .left-fade-leave-active {
    //transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
  }*/
  /*.left-fade-leave-to, .left-fade-enter-from {
    transform: translateX(-20px);
    opacity: .2;
  }*/


  .left-fade-leave-active,
  .left-fade-enter-active {
    transition: all .3s;
  }
  .left-fade-enter-active {
    opacity: 0;
    transform: translateX(-30px);
  }
  .left-fade-enter-to{transform: translateX(0);opacity: 1}

  .left-fade-leave-active {
    opacity: 0;
    transform: translateX(30px);
  }
}
